<template>
  <div>
     <!-- 面包屑导航 -->
   <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <i class="el-icon-s-custom"></i> 
        会员管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>会员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <Vipsearch @search="onsearch" :list="tableData" :isshow="1" />
  
    <!-- 会员列表 -->
    <el-table
    :data="viplist"
    border
    height="400"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="用户名称"
      width="240">
      <template slot-scope="scope">
        <div class="msj_viplist_user">
          <div class="msj_viplist_author">
            <img :src="scope.row.user.author" alt="">
          </div>
          <span>{{ scope.row.user.username }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="lvtag"
      label="等级/标签组"
      width="120">
    </el-table-column>
    <el-table-column
      prop="zctime"
      width="240"
      label="注册时间">
    </el-table-column>
    <el-table-column
    width="200"
      label="积分/余额">
      <template slot-scope="scope">
        <div>
          <p>积分：{{ scope.row.jfye[0] }}</p>
          <p>余额：{{ scope.row.jfye[1] }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column
    width="200"
      label="成交">
      <template slot-scope="scope">
        <div>
          <p>订单：{{ scope.row.cjiao[0] }}</p>
          <p>金额：￥{{ scope.row.cjiao[1] }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div v-show="isshow" style="width: 100%; display: flex; margin: 10px 0; justify-content: flex-end;">
    <el-pagination  
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5,10,20,100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="nums">
    </el-pagination>
  </div>
  </div>
</template>
<script>
import {getmsjviplist} from '../../utils/api'
import Vipsearch from './component/Vipsearch.vue'
function pages(list,page,current){
  let arr=JSON.parse(JSON.stringify(list));
  let start = (current-1)*page;
  return arr.splice(start,page);
}
export default{
  components: { Vipsearch },
  data(){
    return {
      viplist:[],
      isshow:true,
      pagesize:5,
      nums:0,
      tableData: [],
        currentPage4: 1
    }
  },
  created(){
    getmsjviplist().then(res=>{
      if(res.status==200){
        let data=res.data.data.map(v=>{
          v.user=JSON.parse(v.user)
          v.jfye=v.jfye?v.jfye.split('/'):v.jfye
          v.cjiao=v.cjiao?v.cjiao.split('/'):v.cjiao
          return v
        })
        this.tableData=data 
        this.viplist=pages(data,this.pagesize,this.currentPage4)
        this.nums=res.data.data.length
      }
    })
  },
  methods:{
    // 查看详情
    handleClick(v){
      this.$router.push({
        name:'vlistdetail',
        params:{
          detail:v
        }
      })
    },
    handleSizeChange(val) {
      this.viplist=pages(this.tableData,val,this.currentPage4)
      },
      handleCurrentChange(val) {
        this.viplist=pages(this.tableData,this.pagesize,val)
      },
      onsearch(v){
        console.log(v);
        this.viplist=v.arr
        this.isshow=v.show
      }
  }
}
</script>
<style scoped>
*{
  margin: 0;
}
.msj_viplist_user{
  display: flex; align-items: center;
  font-size: 14px;
}
  .msj_viplist_author{
    width: 50px;
    height: 50px; margin-right: 10px;
    display: flex; justify-content: center;
    align-items: center; background: #BCBCBC;
  }
  .msj_viplist_author img{
    width: 40px;
height: 40px;
border-radius: 50%;
  }
</style>